<template>
	<view class="page">
		<view class="p-list">
			<singleList ref="listRef" url="user.order_comment" :sendData="reqData" @reqEnd="searchEnd">
				<template v-slot:items="{ list }">
					<empty v-if="sRes && sRes==='empty'" marginTop="200rpx"></empty>
			
					<block v-for="(item, i) in list" :key="i">
						<evaItem :info="item" @tapReply="showReply" />
					 </block>
				</template>
			</singleList> 
			
		</view>
		<popup ref="replyPop">
			<view class="reply-panel">
				<view class="ic-wrap align-center justify-center" @click="hideReply">
					<image src="/static/cancel.png" mode="aspectFill" class="ic"></image>
				</view>
				
				<view class="r-title">回复评价</view>
				<view class="r-area">
					<textarea  placeholder="请输入回复评价内容" v-model="areaInpt" class="areaInpt" maxlength="300" />
				</view>
				<view class="r-btn" @click="reply">
					<text class="txt">立即回复</text>
				</view>
			</view>
		</popup>
	</view>
</template>

<script lang="ts">
import {
	reactive,
	toRefs,
	defineComponent,
	ref,
	nextTick,
	// watchEffect,
} from 'vue';
import evaItem from './components/evaItem.vue';
import { onLoad, onShow,onPullDownRefresh,onReachBottom } from '@dcloudio/uni-app';
const evas = defineComponent({
	components: {
		evaItem
	},
	props: {},
	setup(props: any, ctx: any) {
		const data = reactive({
			reqData: {},
			sRes:'',
			areaInpt:'',
			popData:{}, //弹窗数据
		});
		const listRef = ref();
		const replyPop =ref();
		onLoad(e => {
		});
		onShow(() => {
			nextTick(() => {
				// data.reqData = {
				// 	status: data.tabs[data.tabCurIdx].status
				// };
				listRef.value.getList(true);
			});
		});
		onPullDownRefresh(()=>{
			listRef.value.getList(true);
			uni.stopPullDownRefresh();
		})
		onReachBottom(()=>{
			listRef.value.getList()
		})
		const searchEnd =({loadingType,pageOneRes})=>{
			if(loadingType === 'noMore' && pageOneRes && pageOneRes.length === 0){
				data.sRes='empty';
			}else{
				data.sRes=loadingType;
			}
		}
		const showReply = (id)=>{
			data.popData = {id};
			replyPop.value.show();
		}
		const hideReply = ()=>{
			data.popData = {};
			replyPop.value.toggle();
		}
		const reply = async()=>{
		   if(!data.areaInpt){
			   return;
		   }
		   const sendData = {
			   comment_id: data.popData.id,
			   reply: data.areaInpt
		   }
		  await uni.$request('order.comment_reply',sendData)
		  listRef.value.getList(true);
		   hideReply();
		}
		return {
			...toRefs(data),
			listRef,
			searchEnd,
			replyPop,
			reply,
			showReply,
			hideReply,
		};
	}
});
export default evas;
</script>

<style lang="scss">
.reply-panel{
	width: 630rpx;
	height: 477rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	position: relative;
	padding:0 34rpx 52rpx;
	.ic-wrap{
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 2;
		.ic{
			width: 20rpx;
			height: 20rpx;
		}
	}
	.r-title{
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-bottom: 18rpx;
	}
	.r-area{
		background: #F7F7F7;
		border: 2rpx solid #999999;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
		.areaInpt{
			width: 560rpx;
		    height: 196rpx;
			padding: 30rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333;
			line-height: 46rpx;
		}
	}
	.r-btn{
		width: 560rpx;
		height: 85rpx;
		background: #3E6FEF;
		border-radius: 43rpx;
		text-align: center;
		.txt{
			line-height: 85rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
}
</style>
